<!-- 添加字段弹窗 -->
<template>
    <div title="测试打印页" class="div-style" v-loading="loadingFlage" element-loading-text="Loading..."
        :element-loading-spinner="svg" element-loading-svg-view-box="-10, -10, 50, 50"
        element-loading-background="rgba(122, 122, 122, 0.8)">
        <div id="print-section" class="printOrder-data" style="width: 360px; height: 130px">
            <div class="about" style="display: flex; justify-content: space-between; align-items: center;width:100%">
                <div style="height: 130px;width: 100%;">
                    <p>王有为</p>
                    <p>总经理</p>
                    <p>电话：18888888888</p>
                </div>
                <img src="https://qushen-file.oss-cn-beijing.aliyuncs.com/outsourcing-2023/zhi-hui/upload/1718177605498BrqvkQuS.png"
                    alt="" />
            </div>
        </div>
        <div>
            <el-button @click="goPage">退出登录</el-button>
            <el-button @click="printFn">打 印</el-button>
            <el-button @click="down">下载文件</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>

import { ref, onMounted, reactive } from 'vue'
const { ipcRenderer } = require('electron');
// @ts-ignore
import { useUserStore } from '@/stores/modules/user'
import { useRouter } from 'vue-router' // 引用vue-router
const router = useRouter()

const loadingFlage = ref(false)
const userStore = useUserStore()
const { logout } = userStore

const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `


const printFn = () => {
    loadingFlage.value = true
    const printSection = document.getElementById('print-section')?.innerHTML;
    if (printSection) {
        const completeHTML = `
      <html>
        <body>
          <style>
           img {
                position: relative;
                top:-20px;
                width: 55px;
                height: 55px;
            }
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0;
                padding: 0;
                font-size:14px;
            }
          </style>
          <div  style="display: flex; justify-content: space-between; align-items: center;">
              ${printSection}  
          </div>
        </body>
      </html>`;
        ipcRenderer.send('print', completeHTML);
    }
}

// 这个是扫码打印完成的函数
ipcRenderer.on('main-renderer', () => {
    if (timer.value) {
        clearTimeout(timer.value);
    }
    timer.value = setTimeout(() => {
        stopLoading();
    }, 1800)

})

const goPage = async () => {
    await logout()
    router.push('/index')
}

const down =()=> {
    // ipcRenderer.send('download-file', `${netConfig.baseURL}/${result}`);
    ipcRenderer.send('download-file', `https://qushen-file.oss-cn-beijing.aliyuncs.com/outsourcing-2022/audi-cup-v2/uploads/2024/07/16/1721108569202452.pdf`);
}

const stopLoading = () => {
    loadingFlage.value = false
}



const dialogVisible = ref(false)

const openDialog = (row?: any) => {
    dialogVisible.value = true
}
const closeDialog = () => {
    dialogVisible.value = false
}
const printing = () => { }

defineExpose({
    openDialog,
})
</script>

<style lang="scss" scoped>
.about {
    img {
        width: 110px;
    }
}

.img_style {
    img {
        width: 100px;
    }
}

.div-style {
    position: absolute;
    width: 400px;
    height: 200px;
    top: 50%;
    left: 50%;
    padding: 0 20px;
    transform: translate(-50%, -50%);
    border: 1px solid #fff;
    background-color: #ccc;
}

.bottom-style {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
</style>